<template>
    <el-table :data="recommendList" style="width: 100%">
        <el-table-column label="推荐名称" prop="name" />
        <el-table-column label="推荐图片" prop="img">
            <template #default="scope">
                <img :src="scope.row.img" alt="" style="height: 50px" />
            </template>
        </el-table-column>
        <el-table-column label="超链接" prop="url" />
            <el-table-column label="是否上架" prop="isshow">
                <template #default="scope">
                    <el-switch v-model="scope.row.isshow" inline-prompt active-text="是" inactive-text="否" />
                </template>
            </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                <el-button size="small" type="danger" @click="handleDel(scope.$index, scope.row)">Delete</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
import request from "../../server/request.js";
import { recommendDel } from "../../api/product";
export default {
    data() {
        return {
            recommendList: [
 
            ],
        };
    },
    created() {
        request.get("/classes/Recommend").then((res) => {
            console.log(res);
            this.recommendList = res.data.results;
        });
    },
    methods: {
        handleEdit(idx, row) {
            console.log(idx, row);
            // 方法1:路由处理
            this.$router.push({
                path: "/recommend/edit",
                query: row,
            });
            // 方法2: 自己手动处理
            // let query = "";
            // for (let attr in row) {
            //   query += `${attr}=${row[attr]}&`;
            // }
            // console.log(query);
            // this.$router.push(`/recommend/edit?${query}`);
        },
        handleDel(idx, { objectId }) {
            recommendDel(objectId).then((res) => {
                //删除线上
                console.log(res);
                this.recommendList.splice(idx, 1); //删除表格
            });
        },
    },
};
</script>

<style lang="scss" scoped>

</style>